﻿<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>jQuery动态自定义添加删除选项卡代码</title>

<link rel="stylesheet" type="text/css" href="css/index.css">

</head>
<body>

<div class="wrap">
		<!-- 选项卡标题内容 -->
		<div class="wrap-top">
				<div class="tab-left">＜＜</div>
				<div class="tab-right">＞＞</div>	
				<div class="cont-tab">

						<div class="cont-scroll">
								<li>
									<span>HTML</span>
									<a href="javascript:void(0)">X</a>
									<div class="line"></div>
								</li>
								<li>
									<span>CSS</span>
									<a href="javascript:void(0)">X</a>
									<div class="line"></div>
								</li>
								<li>
									<span>jQuery</span>
									<a href="javascript:void(0)">X</a>
									<div class="line"></div>
								</li>
								<li>
									<span>javascript</span>
									<a href="javascript:void(0)">X</a>
								</li>
						</div>
				</div>
		</div>



		<!-- 选项卡对应内容 -->
		<div class="wrap-content">　 HTML</div>
		<div class="wrap-content"> 　CSS</div>
		<div class="wrap-content"> 　jQuery</div>
		<div class="wrap-content">　javascript</div>


		<div class="Add">
				<span></span>
				<div class="memu">
					<li class="add-cont">添加内容</li>
					<li class="del-cont">删除全部</li>
				</div>
		</div>


		<!-- 全屏添加内容遮罩 -->
		<div class="full">
				<div class="full-wrap">
						<div class="full-top"><img src="img/add.png">添加内容<span>X</span></div>
						<!-- 添加选项卡内容 -->
						<div class="full-content">
								<div class="full-inp">
										<span>添加标题：</span>
										<input type="" name="" placeholder="选项卡标题">
								</div>
								<div class="full-inp">
										<span>添加内容：</span>
										<textarea placeholder="选项相应内容"></textarea> 
								</div>
								<div class="full-inp">
										<botton>确 认</botton>
								</div>
						</div>
				</div>
		</div>






		<!-- 全屏修改内容遮罩 -->
		<div class="full-modify">
				<div class="full-wrap">
						<div class="full-top"><img src="img/modify.png">修改内容<span>X</span></div>



						<!-- 添加选项卡内容 -->
						<div class="full-content">
								<div class="full-modi">
										<span>修改标题：</span>
										<input type="" name="" placeholder="">
								</div>
								<div class="full-modi">
										<span>修改内容：</span>
										<textarea placeholder=""></textarea> 
								</div>
								<div class="full-modi">
										<botton>确认</botton>
								</div>
						</div>
				</div>
		</div>





</div>

<script src="js/jquery.min.js"></script>
<!--使用低版本jQuery可以不调用jquery-migrate-1.2.1.min.js-->
<script src="js/jquery-migrate-1.2.1.min.js"></script>
<script src="js/tab.js"></script>
<script type="text/javascript">
	$(".wrap").tabs()
</script>

</body>
</html>
